<script src="<?= image_url('/static/assets/global/scripts/echarts.min.js') ?>"></script>
<style>
    #detail_contain{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.60);
        z-index: 999;
    }
    #detail{
        top: 15%;
        left: 24%;
        height: 500px;
        width: 1000px;
    }
    .info-block h4{
        margin-top: 25px;
    }
    h4{
        margin-top: 40px;
    }
    .fa{
        vertical-align: middle;
    }
</style>
<div class="row">
    <div class="col-xs-12">

        <!--    统计信息    -->
        <div class="col-md-12" style="margin-top: 20px;">
            <div class="col-md-9" id="pie" style="height: 500px"></div>
            <div class="col-md-3"  style="height: 500px; background: #333333;color: white;padding: 10px 50px;">
                <h4><i style="font-size: 26px;margin-right: 8px" class="fa fa-motorcycle" aria-hidden="true"></i>平台总车辆 ：<span id="total-task"><?= $total->total_num ?></span></h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-street-view" aria-hidden="true"></i>闲置中 ：<span id="total-finish"><?= $total->free_num ?></span></h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-bolt" aria-hidden="true"></i>使用中：<span id="total-accept"><?= $total->used_num ?></span> </h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-wheelchair" aria-hidden="true"></i>已损坏：<span id="total-ava"><?= $total->broken_num ?></span></h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-gavel" aria-hidden="true"></i>维修中：<span id="total-ava"><?= $total->fixed_num ?></span></h4>
            </div>
        </div>
    </div>
</div>
<!-- loading层 -->
<style>
    .loading-x{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0000008a;
        z-index: 20050;
    }
    .x-contain{
        margin: 18%;
        text-align: center;
    }
</style>
<div class="loading-x">
    <div class="x-contain">
        <img src="/static/assets/20160618173856_Ys5Td.gif" alt="">
    </div>
</div>
<script>
    function ajaxData(url, chartId, successCallback) {
        $(".loading-x").fadeIn();
        $.ajax({
            url: url,
            data: {},
            method: 'POST',
            dataType: 'json',
            success: function (res) {
                $(".loading-x").fadeOut();
                if (res.success) {
                    successCallback(res.data);
                } else {
                    console.log(res)
                }
            },
            fail: function (res) {
                console.log(res)
            }
        });
    }
    var myChartPie = echarts.init(document.getElementById('pie'),'dark');
    var optionPie = {
        title : {
            text: '车辆信息统计',
            subtext: '当前车辆情况',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [

            {
                name:'数量：',
                type:'pie',
                radius : [30, 110],
                center : ['50%', '50%'],
                roseType : 'area',
            }
        ]
    };
    ajaxData('<?=site_url("/analyze/car_analyze/ajaxPieData")?>', myChartPie , function (res) {
        optionPie.legend.data = res.group;
        optionPie.series[0].data = res.data;
        myChartPie.setOption(optionPie);
    });
</script>
